<script setup>
import { computed } from "vue"
const props = defineProps({
	msg: {
		type: String,
		default: "这是炫彩字体",
	},
	className: {
		type: String,
		default: "",
	},
	backgroundImage: {
		type: String,
		default:
			"linear-gradient(45deg, #845EC2, #D65DB1, #FF6F91, #FF9671, #FFC75F, #F9F871)",
	},
	click: {
		type: Function,
		default: () => {
			console.log("click")
		},
	},
	animation: {
		default: true,
	},
	backgroundSize: {
		type: String,
		default: "300%",
	},
	animationDuration: {
		type: String,
		default: "3s",
	},
})

const animation = computed(() => {
	let animation_ = ""
	if (typeof props.animation === "boolean") {
		animation_ = props.animation
	} else if (typeof props.animation === "string") {
		if (props.animation === "true") {
			animation_ = true
		} else {
			animation_ = false
		}
	} else {
		console.warn(`animation 参数类型错误
参数类型应为为Boolen或String 实际${typeof props.animation}`)
	}
	return animation_
})
</script>
<template>
	<div
		class="colorful-font"
		:class="className"
		:style="{
			backgroundImage,
			animation: animation
				? 'colorful_font 3s infinite alternate'
				: 'none',
			backgroundSize: backgroundSize,
			animationDuration,
		}"
		@click="click">
		{{ msg }}
	</div>
</template>
<style>
.colorful-font {
	font-size: 1em;
	font-weight: 500;
	line-height: 1.5em;
	color: transparent;
	background-clip: text;
}
@keyframes colorful_font {
	20% {
		background-position: 20%;
	}
	40% {
		background-position: 40%;
	}
	60% {
		background-position: 60%;
	}
	80% {
		background-position: 80%;
	}
	100% {
		background-position: 100%;
	}
}
</style>
